<template>
<MyContainer>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="城市薪资图" name="first">
      <BarChart :chartData="chartData"/>
    </el-tab-pane>
    <el-tab-pane label="分类薪资图" name="second">
      <BarChart :chartData="chartData"/>
    </el-tab-pane>
  </el-tabs>
</MyContainer>
</template>

<script>
import BarChart from "@/views/dashboard/BarChart";
import {chart1,chart2} from "@/api/recruit/position";
import MyContainer from "@/components/Me/MyContainer";
export default {
  name: "Chart",
  components: {MyContainer, BarChart},
  data() {
    return {
      chartData: {},
      chartData1: {},
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      if (tab.label === '城市薪资图') {
        this.chart1();
      } else {
        this.chart2()
      }
    },
    chart1() {
      chart1().then((res) => {
        let xData=[]
        let sData=[]
        res.forEach(v=>{
          xData.push(v.work_city)
          sData.push(v.salary)
        })
        this.chartData={xData,sData}
      })
    },
    chart2() {
      chart2().then((res) => {
        let xData=[]
        let sData=[]
        res.forEach(v=>{
          xData.push(v.category_name)
          sData.push(v.salary)
        })
        this.chartData={xData,sData}
      })
    }
  },
  created() {
    this.chart1()
  }
}
</script>

<style scoped>

</style>
